<template>
  <div class="cont">
    <div class="dia">
      <div class="header">
        <div class="title">
          <el-icon style="margin-right:5px;">
            <DArrowRight />
          </el-icon>
          系统设置
        </div>
        <div class="close" @click="emit('close')"></div>
      </div>
      <div class="content">
        <div class="left">
          <el-menu active-text-color="#ffffff" background-color="transparent" default-active="2" text-color="#fff" @select="menuselect">
            <el-menu-item index="2">
              <el-icon><VideoCameraFilled /></el-icon>
              <span>设备运维</span>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon>
                <setting />
              </el-icon>
              <span>标签类别管理</span>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="right">
          <syslist1 v-if="state.step==1"  @new="state.step=2" />
          <syse1 v-if="state.step==2" @back="state.step=1" />
          <syslist2 v-if="state.step==3" @new="state.step=4" />
          <syse2 v-if="state.step==4" @back="state.step=3" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import syslist1 from './syslist1.vue'
import syse1 from './syse1.vue'
import syslist2 from './syslist2.vue'
import syse2 from './syse2.vue'
const emit = defineEmits(["close"]);
const state = reactive({
  menuindex:'2',
  step:1,// 1设备运维2新增设备3标签列表4新增标签
})
const menuselect = (mse)=>{
  if(mse=='2'){
    state.step=1
  }else if(mse=='4'){
    state.step=3
  }
}
onMounted(() => {

})

</script>

<style lang="scss" scoped>
.cont {
  width: 1600px;
}

.dia {
  margin-top: 5px;
  width: 1600px;
  height: 750px;
  background-image: url('/images/bgd.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;

    .title {
      margin-left: 10px;
      font-weight: 600;
      font-size: 14px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
    }

    .close {
      margin: 12px 4px 0 auto;
      background-image: url('/images/close.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 26px;
      height: 26px;
      cursor: pointer;
    }
  }

  .content {
    width: 100%;
    height: 720px;
    padding: 10px;
    position: relative;
    display: flex;

    .left {
      width: 220px;
      height: 100%;
      background: linear-gradient(0deg, rgba(11, 81, 127, 0.5) 0%, rgba(11, 81, 127, 0.5) 100%);
    }

    .right {
      width: 1380px;
      background-image: url('/images/mb4.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 30px 40px;
    }
  }
}

:deep(.el-input) {
  --el-input-text-color: #ffffff;
  --el-input-bg-color: #003D6399;
}

:deep(.el-menu) {
  margin-top: 36px;
  border-right: none;
  --el-menu-item-font-size: 16px;

  .el-menu-item.is-active {
    background: linear-gradient(90deg, rgba(46, 233, 255, 0.72) 0%, #0F7BC4 100%);
    box-shadow: 0px 2px 30px 0px #136E8C, inset 0px -8px 16px 0px rgba(192, 231, 255, 0.5);
  }
}
</style>